<template>
<van-button type="primary" @click="clickMe">主要按钮</van-button>
<van-cell title="发送请求示例" is-link @click="sendHttpSuccess" />
<van-cell title="发送失败示例" is-link @click="sendHttpError" />
<van-popup v-model:show="showSucess" :style="{ padding: '64px' }">{{ token }}</van-popup>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { showToast } from 'vant';
import http from "@/api/http"   //http只是个别名 你可以取任意名字 比如 import Http from '@/api/http',下面就用Http.get()

const token=ref('')
const showSucess=ref(false)
const showError=ref(false)


const clickMe=()=>{
  showToast('我被点击了');
}

const sendHttpSuccess=async ()=>{
  try {
    
    const response=await http.get('/login',{    //http.post('url',{params:{},})
    params:{
      account:"admin",
      code:"123456"
    }
  })
  if(response.data.code===1){
    showToast('响应成功')
    token.value=response.data.data
    showSucess.value=true
    //如果该是登录功能 jwt令牌在response.data.data里面 需要存储近本地空间名为token的字段，如下
    //  localStorage.setItem('token'，response.data.data)
  }
  } catch (error) {
    alert(error)
  }
  
}

const sendHttpError=async ()=>{

  //我直接访问后端的oldman接口，但是在访问时我头部没有jwt令牌，返回的是有问题的，我在/api/http.ts已经配置好了，检查到未登录，直接返回到指定页面
  const response=await http.post('/elderProfile',{
    params:{
      
    },
    data:{
      elderAccount:'**',
    }
  })
  //或者直接 http.post('/oldman',data)  如有oldman:{elderAccount:'123456', password:'123456'} 直接 http.post('url',password)
  //具体参考 https://axios-http.com/zh/docs/api_intro      本项目我是默认了用axios进行请求发送
  
}

</script>

<style scoped>

</style>

function showToast(arg0: string) {
  throw new Error('Function not implemented.');
}
